<template>
    <div class="app-role">
      <h3>意见管理</h3>
     <Query
       :items="queryColumns"
       :initial-params="queryParams"
       @query="handleQuery"
       labelWidth="100px"
     />
     <Table
       :table-columns="tableColumns"
       :table-loading="tableLoading"
       :table-data="tableData"
       :total="total"
       @pagination="handlePagination"
     >
       <template #status="{row}">
        {{ row.status==1?'待处理':'已处理' }}
       </template>
       <template #imgList="{row}">
          <div class="classifyName_box" v-if="row.imgList && row.imgList.length>0">
            <img v-for="(item,i) in row.imgList" :key="'imgList_'+i" class="classifyName_img" :src="item" />
          </div>
          <span v-else>-</span>
       </template>
       <template #opt="scope">
         <el-button type="primary" link @click="handleEdit(scope.row)">编辑</el-button>
       </template>
     </Table>
     <el-dialog v-model="showDialog" :title="dialogTitle" width="600">
        <el-form ref="refForm" :model="formData" :rules="formRules" size="default">
          <el-form-item label="信息内容" label-width="100px" >
            <el-input :value="formData.content" disabled></el-input>
          </el-form-item>
          <el-form-item label="图片" label-width="100px">
            <div class="classifyName_box2" v-if="formData.imgList && formData.imgList.length>0">
              <img v-for="(item,i) in formData.imgList" :key="'imgList_'+i" class="classifyName_img2" :src="item" />
            </div>
          </el-form-item>
          <el-form-item label="回复内容" label-width="100px">
            <el-input v-model="formData.dealContent" type="textarea" :rows="4" placeholder="请输入回复内容" autocomplete="off" />
          </el-form-item>
          <el-form-item label="处理状态" label-width="100px">
            <el-radio-group v-model="formData.status">
              <el-radio :value="1" size="large">待处理</el-radio>
              <el-radio :value="2" size="large">已处理</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="showDialog = false" size="default">取消</el-button>
            <el-button type="primary" @click="handleSubmit" size="default">
              确定
            </el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </template>
  
  <script setup name="productTemeplate">
  import Table from "@/components/Table/index.vue";
  import Query from "@/components/Query/index.vue";
  import DialogForm from '@/components/FormDialog/index.vue'
  import { getClassifyList, getClassifytree,saveTemplate,saveClassify } from "@/api/goods";
  import { getFeedbackList,saveFeedback } from "@/api/feedback";

  const { proxy } = getCurrentInstance()
  const tableData = ref([])
  const total = ref(0)
  const tableLoading = ref(false)
  const dialogTitle = ref('')
  const loading = ref(false)
  const showDialog = ref(false)
  const refForm = ref(false)
  const router = useRouter();
  const formRules = ref({
   
  })
  const formData = ref({})
  const data = reactive({
   tableColumns: [
    { label: "信息内容", prop: "content",},
     { label: "图片", prop: "imgList",slot: 'imgList' },
     { label: "处理状态", prop: "status",slot: 'status',width:120},
     { label: "操作",  prop: "opt", slot: 'opt',width:80},
   ],
   queryColumns: [
    { label: "关键词", prop: "content", type: 'input', attrs: {placeholder:'请输入关键词'}},
   ],
   pageParams: {
    current: 1,
    size: 10
   },
   queryParams: {},
   formItems: [
  
   ]
  })
  
  const { tableColumns, queryColumns, pageParams, queryParams, formItems } = toRefs(data)
  /** 获取列表数据 */
  const getList = () => {
    tableLoading.value = true
    const data  = {
       ...queryParams.value,
       ...pageParams.value,
       type:'2',// 1-商品分类
    }
    getFeedbackList(data)
    .then(res => {
      let list = res.data.records || []
      list.map(item=>{
        item.children = item.itemList || []
      })
      console.log(11,list)
       tableData.value = list
       total.value = res.data.total
    })
    .finally(() => {
       tableLoading.value = false
    })
  }
  
  getList()
  /** 搜索按钮操作 */
  const handleQuery = (val) => {
   queryParams.value = val
   getList()
  }
  /** 打开新增弹窗 */
  const handleAdd = () => {
    dialogTitle.value = '新增'
    // 重置表单数据
    formData.value = {
      relationId:'',
      img:''
    }
    showDialog.value = true
  }
  
  /** 打开编辑弹窗 */
  const handleEdit = (row) => {
    let data = JSON.parse(JSON.stringify(row))
  dialogTitle.value = '编辑'
   // 重置表单数据
   formData.value = data
   showDialog.value = true
  }
  /** 删除按钮操作 */
  function handleDelete(row) {
   proxy.$modal.confirm('是否确认删除此数据？').then(function() {
    saveFeedback({id: row.id, status: -1,type:'2'}).then(() => {
       getList()
       proxy.$modal.msgSuccess("删除成功")
     })
   })
  }
  const handlePagination = (val) => {
   pageParams.value = val
   getList()
  }
  const handleSubmit = async () => {
   loading.value = true
   try {
    refForm.value.validate(valid => {
      if (!valid) return
      let params = {
        ...formData.value,
      }
      console.log(11,params)
      saveFeedback(params).then(res=>{
        showDialog.value = false
        proxy.$modal.msgSuccess("提交成功")
        pageParams.value.current = 1
        getList()
      })
     
    })
     
   } finally {
     loading.value = false
   }
  }
  </script>
  
  <style lang="scss" scoped>
  .classifyName_box{
    display: flex;
    align-items: center;
    
    .classifyName_img{
      width: 60px;
      height: 60px;
      object-fit: contain;
      margin-left: 8px;
    }
    span{
  
    }
  }
  .classifyName_box2{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    .classifyName_img2{
      width: 100px;
      height: 100px;
      object-fit: contain;
      margin-left: 8px;
      margin-bottom: 8px;
    }
    span{
  
    }
  }
  .app-role {
   padding: 8px
  }
  </style>